| HTML5 canvas drawImage() 方法 缩放 | 您所在的位置：网站首页 › canvas drawimage 跨域 › HTML5 canvas drawImage() 方法 缩放 |
HTML5 canvas drawImage() 方法 缩放
我的图书馆
查看信箱
系统消息
官方通知
设置
开始对话
有11人和你对话，查看 忽略
历史对话记录
通知设置
留言交流
请选择搜索范围 含 的文章 含 的书籍 含 的随笔昵称597197 / HTML5 / HTML5 canvas drawImage() 方法 缩放 转Word 全屏 打印 修改 转藏+1 分享 QQ空间 QQ好友 新浪微博 微信扫一扫 × 00:00选择朗读音色 亲切女声 稳重女声 成熟男声 选择朗读倍速 0.75倍 1倍 1.5倍 选择循环方式 单篇循环 
HTML5 canvas drawImage() 方法 缩放
2016-01-01
昵称597197
展开全文
实例要使用的图片：  向画布上面绘制图片： JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img,10,10);亲自试一试 浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。 注释：Internet Explorer 8 或更早的浏览器不支持 元素。 定义和用法drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。 JavaScript 语法 1在画布上定位图像： context.drawImage(img,x,y);JavaScript 语法 2在画布上定位图像，并规定图像的宽度和高度： context.drawImage(img,x,y,width,height);JavaScript 语法 3剪切图像，并在画布上定位被剪切的部分： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);参数值参数描述img规定要使用的图像、画布或视频。sx可选。开始剪切的 x 坐标位置。sy可选。开始剪切的 y 坐标位置。swidth可选。被剪切图像的宽度。sheight可选。被剪切图像的高度。x在画布上放置图像的 x 坐标位置。y在画布上放置图像的 y 坐标位置。width可选。要使用的图像的宽度。（伸展或缩小图像）height可选。要使用的图像的高度。（伸展或缩小图像）更多实例例子 1在画布上对图像进行定位，然后规定图像的宽度和高度： JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img,10,10,240,160);亲自试一试 例子 2剪切图片，并在画布上对被剪切的部分进行定位： JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,90,130,90,80,20,20,90,80);亲自试一试 例子 3要使用的视频（请按下播放键以开始演示）： 画布： JavaScript （每 20 毫秒，代码就会绘制视频的当前帧）： var v=document.getElementById("video1"); var c=document.getElementById("myCanvas"); ctx=c.getContext('2d'); v.addEventListener('play',function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false); v.addEventListener('pause',function() {window.clearInterval(i);},false); v.addEventListener('ended',function() {clearInterval(i);},false);亲自试一试 QQ空间 QQ好友 新浪微博 微信扫一扫 赞赏
共11人赞赏
本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
转藏到我的图书馆
献花（0）
+1
来自： 昵称597197 > 《HTML5》 举报推一荐：发原创得奖金，“原创奖励计划”来了！
猜你喜欢 0条评论 发表 请遵守用户 评论公约 查看更多评论
类似文章
更多
 HTML 5 Canvas(画布)教程之图像处理 人们要想实现动态的网页应用，只能借助于第三方的插件，比如Flash或Java，而引入了Canvas标记后，人们直接打通了通往神奇的动态应用网页... javascript-DOM安全异常18：受污染的画布 externalImage2.onload=function(){ canvas.width=externalImage2.width;// use getImageData to replace blue with yellow var imageData=recolorImage(externalImage2,0,0,255,255,255,0);externalIm...  HTML5 Canvas API中drawImage()方法的使用实例 HTML5 Canvas API中drawImage()方法的使用实例 HTML5 Canvas API中drawImage()方法的使用实例。作者：Airing 字体：[增加 减小] 来源：...  《艺妓回忆录》章子怡：你这么努力，活该被别人羡慕！ 她说：“我学英语不仅仅是为了拍电影，而是为了能够真正在国际上立足并继续发展。现代年轻人应该要具备掌握英语的能力，懂得讲英语就多... 利用在图片上中添加文字最终生成海报的代码实现 一个画布在网页中是一个矩形框，通过 元素来绘制.所有的绘制工作必须在 JavaScript 内部完成：实例var c=document.getElementById("myCanvas");var ctx=c.getC...  移动端图片操作（二） //URL对象var url = URL.createObjectURL(file);var img = new Image();img.style.width = ‘100%‘;img.src = url;img.onload = functi... 正则基础之——捕获组（capture group） - 雁过无痕 - CSDN博客 正则基础之——捕获组（capture group） - 雁过无痕 - CSDN博客正则基础之——捕获组（capture group） 收藏 1 概述1.1 什么是捕获组捕获组就是把正则表达式中子表达式匹配的内容，保存到内...  HTML5 //获取canvas元... canvas基础教程 //圆 var x=10,y=10; var a=490,b=290; var duration=2000; var cishu=2000/30; var xstep=(a-x)/cishu; var ystep=(b-y)/cishu; function huayuan(x,y){ cxt.beginPath(); cxt.arc(x,y,10,0,Math.PI*2...  第一阶段复习~HTML5基础夯实
¥.00 微信或支付宝扫码支付： 开通即同意《个图VIP服务协议》 正在支付中，请勿关闭二维码！ 微信支付后，该微信自动注册为你的个人图书馆账号 付费成功，还是不能使用？ 复制成功！ 绑定帐号，享受特权 恭喜你成为个图VIP！ 在打印前，点击“下一步”观看2个提示 下一步 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服微信支付查找“商户单号”方法： 1.打开微信app，点击消息列表中和“微信支付”的对话 2.找到扫码支付给360doc个人图书馆的账单，点击“查看账单详情” 3.在“账单详情”页，找到“商户单号” 4.将“商户单号”填入下方输入框，点击“恢复VIP特权”，等待系统校验完成即可。 支付宝查找“商户订单号”方法： 1.打开支付宝app，点击“我的”-“账单” 2.找到扫码支付给个人图书馆的账单，点击进入“账单详情”页 3.在“账单详情”页，找到“商家订单号” 4.将“商家订单号”填入下方输入框，点击“恢复VIP特权”，等待系统校验完成即可。 已经开通VIP，还是不能打印？ 请通过以下步骤，尝试恢复VIP特权 第1步在下方输入你支付的微信“商户单号”或支付宝“商家订单号” 第2步点击“恢复VIP特权”，等待系统校验完成即可 如何查找商户单号？ 恢复VIP特权正在查询... 订单号过期！ 该订单于2020/09/09 23:59:59支付，VIP有效期：2020/09/09 23:59:59至2020/09/11 23:59:59！如需使用VIP功能，建议重新开通VIP 返回上一页支付成功！ 确定已获得“发送到手机”权限！ 微信扫码，在手机上查看选中内容 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服确定复制刚才选中的内容？ 确定 复制 打印文章 发送到手机微信扫码，在手机上查看选中内容 全屏阅读 朗读全文 分享文章 QQ空间 QQ好友 新浪微博 微信扫一扫 复制 打印文章 发送到手机微信扫码，在手机上查看选中内容 全屏阅读 朗读全文 × ×复制成功！ ¥.00 微信或支付宝扫码支付： 开通即同意《个图VIP服务协议》 正在支付中，请勿关闭二维码！ 自动续费¥12/月，可随时取消 开通即同意《连续订阅服务协议》|《个图VIP服务协议》 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服 ×支付确认 1. 请在手机上打开的页面进行支付； 2. 如支付完成，请点击“支付完成”。 支付完成 取消支付 |
【本文地址】